<template>
    <div class="shop-list-container">
        <h1>购物列表</h1>

        <ul class="shop-header">
            <li>商品名称</li>
            <li>商品价格</li>
            <li>操作</li>
        </ul>

        <ul class="shop-list">
            <li
                v-for="(item, index) in $store.state.shopAllList"
                :key="index">
                <span>{{item.goodsName}}</span>
                <span>{{item.goodsPrice}}</span>
                <button @click="addShopCar(item)" size="mini">addShopCar</button>
            </li>
        </ul>
        <!-- {{$store.state.shopAllList}} -->
    </div>
</template>

<script>
    export default {
        data () {
            return {}
        },
        methods: {
            addShopCar (data) {
                console.log('当前商品', data)
                this.$store.commit('addShopCarList', data)
            }
        }
    }
</script>

<style scoped lang="scss">
h1 {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-list-container {
    flex: 1;
    height: 100%;
    border-right: 2px solid #e4393c;
}

.shop-header {

    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;

    li {
        flex: 1;
        text-align: center;
        line-height: 30px;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }
}

.shop-list {
    li {
        display: flex;
        justify-content: space-between;

        span {
            flex: 1;
            text-align: center;
            line-height: 25px;
        }

        .el-button {
            flex: 1;
        }
    }
}
</style>